<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>添加套餐</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="static/css/style.css">
</head>

<body>
<div class="container">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>添加套餐</legend>
    </fieldset>

    <form class="layui-form" style="margin-top: 100px;">
        <div class="layui-form-item shangpin">
            <div class="layui-inline">
                <label class="layui-form-label">选择商家</label>
                <div class="layui-input-inline">
                    <select name="modules" lay-verify="required" lay-search="" id="xiala" lay-filter="test">
                        <option value="">请选择商家</option>
                    </select>
                </div>
            </div>

        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">套餐序号</label>
            <div class="layui-input-block">
                <input type="text" name="postion" lay-verify="required" placeholder="套餐序号" autocomplete="off"
                       class="layui-input xh" style="width: 300px;">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">套餐名字</label>
            <div class="layui-input-block">
                <input type="text" name="postion" lay-verify="required" placeholder="套餐名字" autocomplete="off"
                       class="layui-input name" style="width: 300px;">
            </div>
        </div>
        <div class="layui-form-item">

            <label class="layui-form-label">套餐内容</label>
            <div class="layui-input-block">
                <textarea type="text" name="title" lay-verify="title" autocomplete="off" placeholder="套餐内容描述"
                          class="layui-input content" style="width: 500px;height: 100px;"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">销售价格</label>
            <div class="layui-input-block">
                <input type="text" name="postion" lay-verify="required" placeholder="销售价格（元）" autocomplete="off"
                       class="layui-input sale" style="width: 300px;">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">实际价格</label>
            <div class="layui-input-block">
                <input type="text" name="postion" lay-verify="required" placeholder="实际价格（元）" autocomplete="off"
                       class="layui-input zksale" style="width: 300px;">
            </div>
        </div>
        <div class="layui-upload img">
            <button type="button" class="layui-btn" id="test1" style="margin-left: 110px;">上传套餐图</button>
            <span style="margin-left: 20px;">1035 x 420</span>
            <div class="layui-upload-list" style="margin-left: 110px;">
                <img class="layui-upload-img" id="demo1" style="width: 500px;height: 250px;">
                <p id="demoText"></p>
            </div>
        </div>

    </form>
    <div style="margin-left:300px;margin-top: 50px; ">
        <button class="layui-btn layui-btn-lg layui-btn-normal" id="save">保存</button>
    </div>
</div>
<script type="text/javascript " src="js/jquery.min.js "></script>
<script src="js/common.js "></script>
<script src="layui/layui.js "></script>
<script src="layer-v3.1.1/layer/mobile/layer.js"></script>
<script>
    var book_id;
    var form;
    var adid;
    var adcontent;
    var upload;
    var postion;
    var din_id;
    $(function () {
        adid = getQueryString("adid");
        getProListxuanze()
        layui.use(['element', 'form', "upload"], function () {
            var $ = layui.jquery,
                element = layui.element;
            upload = layui.upload;
            form = layui.form;
            form.on('select(test)', function (data) {
                console.log(data.elem); //得到select原始DOM对象
                console.log(data.value); //得到被选中的值
                console.log(data.othis); //得到美化后的DOM对象
                id = data.value
            });
            $.ajax({
                type: "POST", //提交方式
                url: baseurl + "/dining/addDiningAll", //路径
                //数据，这里使用的是Json格式进行传输
                success: function (data) { //返回数据根据结果进行相应的处理
                    list = data.data.list;
                    list.forEach(function (item, index) {
                        $('#xiala').append(new Option(item.diningName, item.id)); // 下拉菜单里添加元素
                    })
                    form.render(); //下拉菜单渲染 把内容加载进去

                }
            });
            form.on('select(status)', function (data) {
                console.log(data.elem); //得到select原始DOM对象
                console.log(data.value); //得到被选中的值
                console.log(data.othis); //得到美化后的DOM对象
                din_id = data.value;
            });
            var fd = new FormData();
            //普通图片上传
            uploadInst = upload.render({
                elem: '#test1',
                auto: false,
                bindAction: "#save",
                url: baseurl + "/taocan/insertimg",
                data: fd,
                cache: false,
                processData: false,
                contentType: false,

                before: function (obj) {
                    var fileimg = document.getElementById('demo1').src;

                    fd.append('file', fileimg)
                    console.log(this.data);
                    var thisFile = $(".layui-upload-file").val();

                },
                choose: function (obj) {
                    //预读本地文件示例，不支持ie8
                    obj.preview(function (index, file, result) {
                        $('#demo1').attr('src', result); //图片链接（base64）
                    });
                },
                done: function (res) {
                    //如果上传失败
                    if (res.code > 0) {
                        return layer.msg('上传失败');
                    }
                    console.log(res);
                    //上传成功
                    if (res.meta.code == 200) {
                        $.ajax({
                            type: "POST", //提交方式
                            data: {
                                dinid: $("#xiala").val(),
                                name: $(".name").val(),
                                content: $(".content").val(),
                                sale: $(".sale").val(),
                                zksale: $(".zksale").val(),
                                xh: $(".xh").val(),
                                img: res.data
                            },
                            url: baseurl + "/taocan/addTaocan", //路径
                            //数据，这里使用的是Json格式进行传输
                            success: function (data) { //返回数据根据结果进行相应的处理
                                form.render(); //下拉菜单渲染 把内容加载进去
                                layer.alert('新增成功', function () {
                                    window.parent.location.reload();
                                });
                            }
                        });

                    } else if (res.meta.code == -1) {
                        return layer.msg(res.meta.msg);
                    } else if (res.meta.code == 0) {
                        return layer.msg(res.meta.msg);
                    } else if (res.meta.code == -2) {
                        return layer.msg(res.meta.msg);
                    }
                },
                error: function () {
                    //演示失败状态，并实现重传
                    var demoText = $('#demoText');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                    demoText.find('.demo-reload').on('click',
                        function () {
                            uploadInst.upload();
                        });
                }
            });

        })
        $(".layui-input").keyup(function () {
            getProListxuanze();
        })

    })

    function getProListxuanze() {
        $.ajax({
            type: "POST", //提交方式
            url: baseurl + "/dining/addDiningAll", //路径
            data: {
                product_name: $(".layui-input").val()
            },
            //数据，这里使用的是Json格式进行传输
            success: function (data) { //返回数据根据结果进行相应的处理
                list = data.data;
                $.each(data.data, function (index, item) {
                    $('#xiala').append(new Option(item.diningName, item.id)); // 下拉菜单里添加元素
                })
                form.render(); //下拉菜单渲染 把内容加载进去
            }

        });
    }
</script>
</body>

</html>